​<template>
  <div id="goTop">
    <div class="goTop" v-show="goTopShow" @click="goTop">
      <i class="el-icon-caret-top goTopIcon"></i>
    </div>
  </div>
</template>
<script>
  export default {
    name: "goTop",
    data() {
      return {
        scrollTop: "",
        goTopShow: false
      };
    },
    watch: {
      scrollTop(val) {
        this.goTopShow = this.scrollTop > 500;
      }
    },
    methods: {
      handleScroll() {
        this.scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        if (this.scrollTop > 500) {
          this.goTopShow = true;
        }
      },
      goTop() {
        let timer = null,
          _that = this;
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
          if (_that.scrollTop > 0) {
            _that.scrollTop -= 250;
            document.body.scrollTop = document.documentElement.scrollTop =
              _that.scrollTop;
            timer = requestAnimationFrame(fn);
          } else {
            cancelAnimationFrame(timer);
            _that.goTopShow = false;
          }
        });
      }
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll);
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll);
    }
  };
</script>

<style scoped>
  .goTop {
    position: fixed;
    padding: 10px;
    right: 25px;
    bottom: 60px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  }
  .goTop:hover .goTopIcon {
    color: rgba(51, 153, 255, 1);
  }
  .goTopIcon {
    font-size: 25px;
    color: rgba(51, 153, 255, 0.8);
  }
</style>

​
